<template>
  <div class="zhuanji">
      <h4 class="tittle">全部专辑</h4>
      <div class="zhuanji_info">
        <div
          class="info_list"
          v-for="(index, id) in album_list.info"
          :key="index.id"
          @mouseenter="en_zj(id)"
          @mouseleave="le_zj"
          @click="
            go_album_list(
              index.albumid,
              index.imgurl,
              index.albumname,
              index.publishtime
            )
          "
        >
          <img v-lazy="index.imgurl" alt="图片" />
          <div class="showdow" :class="{ block: zj_show == id }">
            <span class="iconfont icon-24gl-play"></span>
          </div>
          <p
            @mouseenter="en_zj_p(id)"
            @mouseleave="le_zj_p"
            :class="{ color: zj_p_color == id }"
          >
            {{ index.albumname }}
          </p>
          <span class="time" @mouseenter="le_zj">{{ index.publishtime }}</span>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data(){
    return{
      //鼠标移入背景
      zj_show: null,
      zj_p_color: null,
    }
  },
  props:['album_list'],
  methods:{
    //专辑控制鼠标移入背景
    en_zj(index) {
      this.zj_show = index;
    },
    le_zj() {
      this.zj_show = null;
    },
    //控制字体颜色
    en_zj_p(index) {
      this.zj_show = null;
      this.zj_p_color = index;
    },
    le_zj_p() {
      this.zj_p_color = null;
    },
    //跳转到专辑列表
    go_album_list(index, a, b, c) {
      this.$router.push({
        name: "album_list",
        query: {
          album: index,
          img: a,
          name: b,
          time: c,
        },
      });
    },
  }
}
</script>

<style lang="less">
//专辑
  .zhuanji {
    cursor: pointer;
    .tittle {
      margin-bottom: 10px;
    }
    .zhuanji_info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .info_list {
        width: 150px;
        margin-bottom: 15px;
        position: relative;
        img {
          height: 150px;
          border-radius: 5px;
          background: #000;
        }
        p {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 16px;
        }
        .time {
          font-size: 14px;
          color: #8d8d8d;
        }
        //控制背景

        .showdow {
          display: none;
          border-radius: 5px;
          width: 150px;
          height: 150px;
          background-color: #000;
          position: absolute;
          top: 0;
          opacity: 0.5;
          .icon-24gl-play {
            position: absolute;
            font-size: 40px;
            top: 55px;
            left: 55px;
            color: #fff;
          }
        }
        .block {
          display: block;
        }
        .color {
          color: #00a9ff;
        }
      }
      .info_list:last-child:nth-child(6n-1) {
        margin-right: 170px;
      }
      .info_list:last-child:nth-child(6n-2) {
        margin-right: 340px;
      }
      .info_list:last-child:nth-child(6n-3) {
        margin-right: 510px;
      }
      .info_list:last-child:nth-child(6n-4) {
        margin-right: 680px;
      }
    }
  }
</style>